<template>
  <div class="challenge-layout">
    <IntroWelcome />
    <div class="layout-header">
      <div class="title">闯关问答</div>
      <div class="stats">
        <div class="stat"><span>积分</span><b :class="['counter', animateScore && 'animate']">{{ challenge.score }}</b></div>
        <div class="divider" />
        <div class="stat"><span>连胜</span><b :class="['counter', animateStreak && 'animate']">{{ challenge.streak }}</b></div>
        <div class="divider" />
        <div class="progress">
          <div :class="['progress-bar']"><div :class="['bar', animateProgress && 'pulse']" :style="{ width: `${progress}%` }" /></div>
          <div class="progress-text">{{ challenge.currentIndex + 1 }}/{{ challenge.questions.length }}</div>
        </div>
        <div class="divider" />
        <d-button size="sm" variant="outline" @click="showAchievements = true">成就</d-button>
      </div>
    </div>
    <div class="layout-main">
      <div class="chat-area">
        <ChatFeed />
      </div>
    </div>
    <div class="layout-footer">
      <Input />
    </div>
    <AchievementsPanel v-if="showAchievements" @close="showAchievements = false" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useChallengeStore, useChatStatusStore } from '@/store';
import ChatFeed from '@/view/challenge/chat-feed.vue';
import { Input } from '@view/input';
import IntroWelcome from '@/view/welcome/intro.vue';
import AchievementsPanel from '@/view/achievement/achievements.vue';

const challenge = useChallengeStore();
const chatStatusStore = useChatStatusStore();
const progress = computed(() => {
  const total = challenge.questions.length || 1;
  return Math.min(100, Math.round(((challenge.currentIndex + 1) / total) * 100));
});

const animateScore = ref(false);
const animateStreak = ref(false);
const animateProgress = ref(false);

watch(() => challenge.score, () => {
  animateScore.value = true;
  setTimeout(() => (animateScore.value = false), 400);
});

watch(() => challenge.streak, () => {
  animateStreak.value = true;
  setTimeout(() => (animateStreak.value = false), 400);
});

watch(() => challenge.currentIndex, () => {
  animateProgress.value = true;
  setTimeout(() => (animateProgress.value = false), 500);
});

const onStart = () => challenge.start();
const onStop = () => challenge.stop();
const onNext = () => challenge.next();
const showAchievements = ref(false);
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.challenge-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 12px 12px 12px;
  flex: 1;
  height: 100%;
}

.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(94,124,224,0.12), rgba(94,124,224,0.02));
  box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);

  .title { font-weight: 600; color: $devui-text; }

  .stats { display: flex; align-items: center; gap: 12px; }
  .stat { display: flex; align-items: center; gap: 8px; }
  .stat span { color: $devui-aide-text; }
  .stat b { font-weight: 600; color: $devui-text; }
  .counter { transition: transform 0.2s ease-in-out, text-shadow 0.2s ease-in-out; }
  .counter.animate { transform: scale(1.08); text-shadow: 0 0 10px rgba(94,124,224,0.3); transition: transform 0.2s ease-in-out, text-shadow 0.2s ease-in-out; }
  .divider { width: 1px; height: 14px; background-color: $devui-line; }

  .progress { display: flex; align-items: center; gap: 8px; }
  .progress-bar { width: 220px; height: 8px; border-radius: 8px; background-color: $devui-dividing-line; overflow: hidden; }
  .bar { height: 100%; background-color: $devui-brand; transition: width 0.3s ease-in-out; }
  .bar.pulse { box-shadow: 0 0 0 6px rgba(94,124,224,0.08) inset; }
  .progress-text { font-size: $devui-font-size-sm; color: $devui-aide-text; }
}

.layout-main {
  display: flex;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
.chat-area { min-width: 0; flex: 1; display: flex; }

.layout-footer { width: 100%; }

@media screen and (max-width: 940px) {
  .layout-main { grid-template-columns: 1fr; }
}
</style>